<template>
	<div>
		<div :style="FieldItem?.attrs.boxStyle">
			<el-input v-model="componentVal" :placeholder="FieldItem?.attrs.placeholder" style="width: 78%" clearable />
			<el-button class="searchBtn" style="width: 20%; height: 100%" type="primary" @click="emits('handleClick', FieldItem)">
				<Search style="width: 60%; margin: 0 auto"></Search>
			</el-button>
		</div>
		<!-- 热搜列表 -->
		<ul :style="FieldItem?.attrs.ulStyle">
			<li
				v-for="(item, i) in FieldItem?.attrs.hotSearch"
				:key="i"
				style="float: left; margin-right: 20px; cursor: pointer"
				:style="'color:' + item.color"
				@click="clickTextSearch(item.title)"
			>
				{{ item.title }}
			</li>
		</ul>
	</div>
</template>

<script setup lang="ts">
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { Search } from '@element-plus/icons-vue';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		modelValue: string;
		FieldItem: TabFieldType | null;
	}>(),
	{
		modelValue: '',
		FieldItem: null,
	}
);
const { FieldItem } = toRefs(props);
const emits = defineEmits(['update:modelValue', 'handleClick']);
const componentVal = ref('');// 搜索的文字内容

// 点击热搜的文字去搜索
const clickTextSearch = (title: string) => {
	componentVal.value = title;
	emits('handleClick', FieldItem.value);
};

watch(
	() => props.modelValue,
	(newVal) => {
		if (FieldItem.value?.tag !== 'span') {
			componentVal.value = newVal ?? '';
			// console.log('watch input', newVal);
		}
	},
	{
		immediate: true,
	}
);
watch(
	() => componentVal.value,
	(newVal) => {
		if (FieldItem.value?.tag !== 'span') {
			emits('update:modelValue', newVal);
			// console.log('watch componentVal', newVal);
		}
	}
);
</script>

<style lang="scss" scoped>
ul {
	list-style: none;
}
.el-input__wrapper {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.searchBtn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
</style>
